<template>
  <view>
    <u-navbar title="座位预约" autoBack fixed placeholder right-icon="list" @rightClick="goList()"></u-navbar>
    <view class="content">
      <view style="background-color: #ffffff;padding: 10px;box-sizing: border-box;">
        <u-search placeholder="自习室名称" v-model="siftName" @search="getDataList(true)" @custom="getDataList(true)"></u-search>
      </view>
      <z-paging ref="paging" fixed use-safe-area-placeholder refresher-vibrate refresher-only
			@query="onRefresh" safe-area-inset-bottom show-refresher-when-reload show-refresher-update-time
			style="top: calc(44px + var(--status-bar-height) + 54px);" @scroll="onScroll">
        <u-gap height="10px" bg-color="#f5f5f5"></u-gap>
        <view v-if="dataList.length != 0">
          <u-cell :title="item.name" isLink v-for="(item, index) in dataList" :key="index" @click="goDetail(item)">
            <text slot="label" class="cell_label">
              开放时间：{{ item.startTime + '~' + item.endTime }}
            </text>
            <view slot="value" class="cell_value">
              <text class="icon-seat"></text>
              <text style="margin-left: 10px;">{{ item.volume - item.remain }}</text>
            </view>
          </u-cell>
          <u-loadmore :status="loadMore"></u-loadmore>
        </view>
        <u-empty v-else icon="/static/no_data.png" text="暂无数据"></u-empty>
      </z-paging>
    </view>

    <c-loading></c-loading>
  </view>
</template>

<script>
import mixin from '@/mixin'
import {
  getStudyList
} from '@/api/study'
export default {
  data() {
    return {
      items: []
    }
  },
  mixins: [mixin],
  created() {
    this.getDataList(false)
  },
  methods: {
    goList() {
      uni.navigateTo({
        url: '/pages/menus/reservation/log'
      })
    },
    getDataList(isRefresh) {
      const params = {}
      params.size = 20
      params.current = this.current
      params.siftName = this.siftName
      getStudyList(params).then(res => {
        this.$refs.paging.complete()
        const { code, data } = res
        if(code === 200) {
          this.total = data.total
          if(isRefresh) {
            this.dataList = []
          }
          data.list.forEach(item => {
            this.dataList.push(item)
          })
        }
      }).catch(() => {
        this.$refs.paging.complete()
      })
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/menus/reservation/detail?id=${item.id}`
      })
    },
  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer)
  }
} 
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;

  &::v-deep .u-tag-wrapper {
    display: block;
  }

  .cell_label, .cell_value {
    color: #999999;
    font-size: 12px;
  }

  .cell_value {
    display: flex;
    align-items: center;
    color: #00a679;
    font-weight: bold;
  }
}
</style>